<template>
  <div class="operate">
    <!-- 板块 -->
    <div class="plate">
      <!-- 入驻商家 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <i class="bossVersion">&#xe60f;</i>
          <p class="title">入驻商家</p>
          <p class="num flex-ib">
            {{totalData.admission}}
            <i class="units">家</i>
          </p>
        </div>
      </view-item>
      <!-- 孵化企业 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <i class="bossVersion">&#xe60d;</i>
          <p class="title">孵化企业</p>
          <p class="num flex-ib">
            {{totalData.hatch}}
            <i class="units">家</i>
          </p>
        </div>
      </view-item>
      <!-- 云仓仓库 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <i class="bossVersion">&#xe60e;</i>
          <p class="title">云仓仓库</p>
          <p class="num flex-ib">
            {{totalData.build}}
            <i class="units">㎡</i>
          </p>
        </div>
      </view-item>
      <!-- 新零售门店 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <i class="bossVersion">&#xe608;</i>
          <p class="title">新零售门店</p>
          <p class="num flex-ib">
            {{totalData.newRetailStore}}
            <i class="units">家</i>
          </p>
        </div>
      </view-item>
      <!-- 物流站点 -->
      <view-item>
        <div slot="itemData" class="plateData">
          <i class="bossVersion">&#xe610;</i>
          <p class="title">物流站点</p>
          <p class="num flex-ib">
            {{totalData.logisticsSite}}
            <i class="units">个</i>
          </p>
        </div>
      </view-item>
    </div>
    <!-- 各子公司销售情况 -->
    <div class="plateSale">
      <item-title>
        <span slot="txt" class="txt">各子公司销售情况</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:万元</div>
          <bar-chart v-model="eachCompanyArr" :option="eachCompanyOption"></bar-chart>
        </div>
      </view-item>
    </div>
    <!-- 仓库使用 -->
    <div class="depot">
      <item-title>
        <span slot="txt" class="txt">仓库使用</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData depotData">
          <div class="left">
            <!-- <div class="chartTips">单位:万元</div> -->
            <pie-chart v-model="storageAreaArr" :option="storageAreaOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p>点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 云仓出入库 -->
    <div class="access">
      <item-title>
        <span slot="txt" class="txt">云仓出入库</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:万件</div>
          <line-chartss id="mylineChartss" v-model="accessArr" :option="lineChartOption"></line-chartss>
        </div>
      </view-item>
    </div>
    <!-- 电商贸易采购总价 -->
    <div class="purchase">
      <item-title>
        <span slot="txt" class="txt">电商贸易采购总价</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:万元</div>
          <bar-charts v-model="purchasePriceArr" :option="purchaseOption"></bar-charts>
        </div>
      </view-item>
    </div>
    <!-- 成交额趋势 -->
    <div class="trend">
      <item-title>
        <span slot="txt" class="txt">成交额趋势</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:万元</div>
          <line-chartss id="mylineChartss" v-model="turnoverArr" :option="lineChartOption"></line-chartss>
        </div>
      </view-item>
    </div>
    <!-- 电商贸易库存总价 -->
    <div class="purchase">
      <item-title>
        <span slot="txt" class="txt">电商贸易库存总价</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="itemData">
          <div class="chartTips">单位:万元</div>
          <bar-charts v-model="stockPriceArr" :option="purchaseOption"></bar-charts>
        </div>
      </view-item>
    </div>
  </div>
</template>

<script>
import lineChartss from "@/components/Chart/lineChartssSmooth";
import pieChart from "@/components/Chart/pieChart";
import barChart from "@/components/Chart/barChart";
import barCharts from "@/components/Chart/barCharts";
import itemTitle from "@/components/bossVersion/itemTitle";
import viewItem from "@/components/bossVersion/viewItem";
import {
  GetDataByTargetJL,
  GetOverallTurnoverTrend,
  GetIndustrialParkOperatingData
} from "@/api/cyy/IndustrialParkForJL";
import {
  GetDataByTarget,
  GetDoubleDetailList
} from "@/api/cyy/IndustrialParkForCloudStorehouse";
export default {
  components: {
    lineChartss,
    pieChart,
    barChart,
    barCharts,
    itemTitle,
    viewItem
  },
  data() {
    return {
      totalData: {
        admission: 0,
        hatch: 0,
        employment: 0,
        park: 0,
        build: 0,
        parking: 0,
        incubator: 0,
        enterprise: 0,
        achievement: 0,
        newRetailStore: 0,
        logisticsSite: 0
      }, // 上部汇总数据
      turnoverArr: [], // 成交额趋势
      purchasePriceArr: [], // 电商贸易采购总价

      stockPriceArr: [], // 库存总价
      // 电商贸易采购总价 option
      purchaseOption: {
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            show: false
          }
        ],
        hidePieMargin: true,
        color: ["#48e5ff", "#ff7145"],
        legend: {
          top: -5,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: "20%",
          left: "12%",
          height: "50%"
        },
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        labelDefault: 3
      },
      accessArr: [],
      lineChartOption: {
        smooth: false,
        dataZoom: [
          {
            show: false
          }
        ],
        toolTipTxtColor: "#48e5ff",
        grid: {
          top: "20%",
          left: "12%",
          height: "50%"
        },
        legendColor: "#48e5ff",
        legend: {
          top: -5,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        hideLineColor: true,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 45,
            inside: false,
            rich: {
              value: {
                color: "#48e5ff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          }
        },
        color: ["#FAAF3B", "#28e787", "#ff3e9a", "#48e5ff", "#ff7145"]
      },
      storageAreaArr: [], // 仓库使用
      storageAreaOption: {
        legendIndex: 1, // legend 需要显示的数据
        otherData: [],
        startAngle: 300,
        hidePieMargin: true,
        otherColor: ["#F0BD26", "#EB5A24"],
        otherRadius: [0, "50%"],
        otherPosion: "inside",
        otherFormatter: "{d}%",
        otherLabel: true,
        otherCenter: ["55%", "63%"],
        color: ["#28E787", "#00D1FF"],
        center: ["55%", "63%"],
        legend: {
          top: -5,
          right: 0,
          itemGap: 10,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        showLabel: true, // 是否显示图标 的label
        showLine: true // 是否显示图标线 的label
      },
      eachCompanyArr: [], // 各子公司销售情况
      eachCompanyOption: {
        startColor: "#48e5ff",
        endColor: "#48e5ff",
        exchange: true,
        grid: {
          top: "15%",
          left: "27%",
          height: "85%"
        },
        xAxis: {
          show: false
        },
        textStyle: {
          color: "#48e5ff",
          fontFamily: "DIN Condensed Bold",
          fontSize: 12
        },
        label: {
          show: true,
          formatter: "{c}"
        }
      }
    };
  },
  mounted() {
    this.setData();
    this.GetTotalData();
    this.GetEachCompanyArr();
    this.GetOtherData();
    this.GetAccessArr();
    this.GetTurnoverArr();
  },
  methods: {
    // 趋势
    async GetTurnoverArr() {
      try {
        var res = await GetOverallTurnoverTrend();
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "turnoverArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 上面总数据
    async GetTotalData() {
      try {
        var res = await GetIndustrialParkOperatingData();
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 各子公司销售情况
    async GetEachCompanyArr() {
      const p = {
        queryType: "38006"
      };
      try {
        var res = await GetDataByTargetJL(p);
        if (res.data.code === "0") {
          var newArrList = [];
          res.data.result.forEach(element => {
            newArrList.unshift(element);
          });
          this.$set(this, "eachCompanyArr", newArrList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 各子公司销售情况
    async GetAccessArr() {
      const p = {
        startTime: this.$utils.formatterStartTime(),
        queryType: "32008",
        timeAccuracy: "4005"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "accessArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 仓库使用
    async GetOtherData() {
      const p = {
        queryType: "32001"
      };
      const parameter = {
        queryType: "32018"
      };

      var totalNmu = 0;
      var falseData = {
        name: "",
        value: 0
      };
      try {
        var res = await GetDataByTarget(p);
        var result = await GetDataByTarget(parameter);
        if (result.data.code === "0") {
          res.data.result.list.forEach(element => {
            if (element.name === "已使用库位") {
              totalNmu = element.value;
            }
          });
          var newArr = [
            {
              name: "跨境电商",
              value: res.data.result.total - totalNmu,
              itemObj: {
                value: res.data.result.total - totalNmu,
                name: "",
                label: {
                  show: false
                },
                tooltip: { show: false },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "transparent",
                    borderColor: "transparent",
                    borderWidth: 0
                  }
                }
              }
            }
          ];
          result.data.result.list.forEach(item => {
            falseData = {
              name: item.name,
              value: (item.value * totalNmu) / result.data.result.total
            };
            newArr.unshift(falseData);
          });
          this.$set(this, "storageAreaArr", newArr);
          this.$set(this.storageAreaOption, "otherData", res.data.result.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    setData() {
      var stockPriceArr = [
        {
          name: "1月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 24, percent: null }
          ]
        },
        {
          name: "2月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 28, percent: null }
          ]
        },
        {
          name: "3月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 27, percent: null }
          ]
        },
        {
          name: "4月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 26, percent: null }
          ]
        },
        {
          name: "5月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 25, percent: null }
          ]
        },
        {
          name: "6月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 65, percent: null }
          ]
        },
        {
          name: "7月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 33, percent: null }
          ]
        },
        {
          name: "8月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 33, percent: null },
            { name: "外贸电商", value: 22, percent: null }
          ]
        },
        {
          name: "9月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 44, percent: null }
          ]
        },
        {
          name: "10月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 98, percent: null },
            { name: "外贸电商", value: 55, percent: null }
          ]
        },
        {
          name: "11月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 24, percent: null },
            { name: "外贸电商", value: 21, percent: null }
          ]
        },
        {
          name: "12月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 54, percent: null },
            { name: "外贸电商", value: 34, percent: null }
          ]
        }
      ];
      this.$set(this, "stockPriceArr", stockPriceArr);
      var purchasePriceArr = [
        {
          name: "1月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 24, percent: null }
          ]
        },
        {
          name: "2月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 28, percent: null }
          ]
        },
        {
          name: "3月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 27, percent: null }
          ]
        },
        {
          name: "4月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 26, percent: null }
          ]
        },
        {
          name: "5月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 25, percent: null }
          ]
        },
        {
          name: "6月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 65, percent: null }
          ]
        },
        {
          name: "7月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 33, percent: null }
          ]
        },
        {
          name: "8月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 33, percent: null },
            { name: "外贸电商", value: 22, percent: null }
          ]
        },
        {
          name: "9月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 44, percent: null }
          ]
        },
        {
          name: "10月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 98, percent: null },
            { name: "外贸电商", value: 55, percent: null }
          ]
        },
        {
          name: "11月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 24, percent: null },
            { name: "外贸电商", value: 21, percent: null }
          ]
        },
        {
          name: "12月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 54, percent: null },
            { name: "外贸电商", value: 34, percent: null }
          ]
        }
      ];
      this.$set(this, "purchasePriceArr", purchasePriceArr);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.operate {
  line-height: 1;
  // 板块
  .plate {
    display: flex;
    flex-flow: row wrap;
    & > .item {
      @include flexXYcen;
      width: 1.725rem;
      height: 1.35rem;
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
      &:nth-of-type(1) {
        color: $color3;
      }
      &:nth-of-type(2) {
        color: $color1;
      }
      &:nth-of-type(3) {
        color: $color5;
      }
      &:nth-of-type(4) {
        color: $color4;
      }
      &:nth-of-type(5) {
        color: $budget;
      }
      &:nth-child(2n) {
        margin-right: 0;
      }
      .plateData {
        @include flexFdcXcen;
        & > .bossVersion {
          font-size: 0.19rem;
        }
        & > .title {
          margin-top: 0.05rem;
          margin-bottom: 0.1rem;
          @include bold(0.13rem);
        }
        & > .num {
          @include din(0.3rem);
          & > .units {
            margin-left: 0.05rem;
            font-size: 0.12rem;
          }
        }
      }
    }
  }
  .item {
    width: 100%;
    height: 1.65rem;
  }
  // 仓库使用
  .depot {
    .depotData {
      @include flexYcen;
      & > .left {
        position: relative;
        width: calc(100% - 1.06rem);
        height: inherit;
        .chartTips {
          position: absolute;
        }
      }
      & > em {
        width: 1px;
        height: 1.25rem;
        margin-left: 0.15rem;
        margin-right: 0.15rem;
        background-color: $color9;
      }
      & > .right {
        width: 1.06rem;
        & > p {
          color: $color1;
          font-size: 0.12rem;
          text-align: center;
          line-height: 1.5;
        }
      }
    }
  }
  // 云仓出入库
  .plateSale,
  .access,
  .purchase,
  .trend {
    .itemData {
      .chartTips {
        @include absoluteTLSide(0, 0, 1);
      }
    }
  }
}
</style>
